<template>
  <div class="container">
    <el-card class="box-card">
      <el-row :gutter="10">
        <!-- 搜索表单 -->
        <el-form ref="queryformRef" :model="queryInfo">
          <el-col :span="6">
            <el-form-item label="关键字:" prop="keyword">
              <el-input class="h32" placeholder="根据文章标题搜索" v-model="queryInfo.keyword"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="状态:" prop="state">
              <el-select class="h32" v-model="queryInfo.state" placeholder="请选择">
                <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
              <el-button size="mini" class="qingchu" @click="ResetForm">清除</el-button>
              <el-button el-button type="primary" size="mini" @click="getArticleList()">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-form>
        <el-col :span="8"><el-button type="success" icon="el-icon-edit" size="mini" class="edit" @click="dialogVisible = true">新增技巧</el-button></el-col>
      </el-row>
      <el-alert :title="`数据一共有${queryInfo.counts}条`" type="info" show-icon :closable="false"></el-alert>

      <!-- 面试表格 -->
      <el-table :data="articlelist" style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column label="文章标题" width="380">
          <template slot-scope="scope">
            <span style="margin-right: 5px">{{ scope.row.title }}</span>
            <i v-if="scope.row.videoURL" class="el-icon-film" style="color: #00f" @click="open(scope.row)"></i>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数" width="180"> </el-table-column>
        <el-table-column prop="username" label="录入人"> </el-table-column>
        <el-table-column prop="createTime" label="录入时间">
          <template slot-scope="scope">
            {{ scope.row.createTime | relativeTime }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="录入状态">
          <template slot-scope="scope">
            {{ scope.row.state == 1 ? "已启用" : "已禁用" }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-link :underline="false" type="primary" @click="preview(scope.row)">预览</el-link>
            <el-link :underline="false" type="primary" v-model="scope.row.state" @click="exit(scope.row)">{{ scope.row.state == 1 ? "禁用" : "启用" }}</el-link>
            <el-link :underline="false" type="primary" :disabled="!!scope.row.state" @click="edit(scope.row)">修改</el-link>
            <el-link :underline="false" type="primary" :disabled="!!scope.row.state" @click="shanchu(scope.row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination class="fenye" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page - 0" :page-sizes="[5, 10, 20, 50]" :page-size="queryInfo.pagesize - 0" layout=" sizes, prev, pager, next, jumper" :total="queryInfo.counts"></el-pagination>
      <!-- 新增文本框 -->
      <el-dialog title="新增文章" :visible.sync="dialogVisible" width="800px" @closed="addcloseDialog">
        <!-- 新增表单 -->
        <el-form :model="addForm" :rules="addformRule" ref="addFormRef" label-width="100px" class="demo-ruleForm">
          <el-form-item label="文章标题:" prop="title">
            <el-input v-model="addForm.title" placeholder="请输入文章标签" style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item label="文章内容:" prop="articleBody">
            <quill-editor v-model="addForm.articleBody"></quill-editor>
          </el-form-item>
          <el-form-item label="地址视频:" prop="videoURL">
            <el-input v-model="addForm.videoURL" placeholder="请输入视频地址" style="width: 100%"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addFormdialog">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 预览对话框 -->
      <el-dialog title="预览文章" :visible.sync="previewdialogVisible" width="800px">
        <h2>{{ detail.title }}</h2>
        <span class="left10">{{ detail.createTime | relativeTime }}</span>
        <span class="left10">超级管理员</span>
        <span class="left10 el-icon-view el-icon--left">{{ detail.visits }}</span>

        <div class="content" v-html="detail.articleBody"></div>
      </el-dialog>
      <!-- 修改对话框 -->
      <el-dialog title="新增文章" :visible.sync="xiugaiVisible" width="800px">
        <!-- 修改表单 -->
        <el-form :model="detail" :rules="addformRule" ref="addFormRef" label-width="100px" class="demo-ruleForm">
          <el-form-item label="文章标题:" prop="title">
            <el-input v-model="detail.title" placeholder="请输入文章标签" style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item label="文章内容:" prop="articleBody">
            <quill-editor v-model="detail.articleBody"></quill-editor>
          </el-form-item>
          <el-form-item label="地址视频:" prop="videoURL">
            <el-input v-model="detail.videoURL" placeholder="请输入视频地址" style="width: 100%"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="xiugaiVisible = false">取 消</el-button>
          <el-button type="primary" @click="xiugaidialog">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 视频弹出框 -->
      <el-dialog class="video" title :visible.sync="dialogPlay" width="50%" :show-close="false">
        <el-button type="info" icon="el-icon-close" circle @click="close"></el-button>
        <video :src="videoUrl" autoplay class="video" width="100%" height="100%"></video>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, remove, add, detail, update, changeState } from "../../api/hmmm/articles";
import { status } from "../../api/hmmm/constants";
export default {
  data() {
    return {
      queryInfo: {
        page: 1,
        pagesize: 10,
        keyword: "",
        state: null,
        //总页数
        pages: 1,
        //总记录数
        counts: 100,
      },
      status: status,
      //文章列表数据
      articlelist: [],
      //文章详情数据
      detail: {},
      //控制新增对话框的显示
      dialogVisible: false,
      //预览对话框的显示
      previewdialogVisible: false,
      //修改对话框显示
      xiugaiVisible: false,
      //视频弹出框
      dialogPlay: false,
      //视频地址
      videoUrl: "",
      //新增表单
      addForm: {
        title: "",
        articleBody: "",
        videoURL: "",
      },
      //新增表单规则
      addformRule: {
        title: [{ required: true, message: "请输入文章标题", trigger: "blur" }],
        articleBody: [{ required: true, message: "请输入文章内容", trigger: "change" }],
      },
    };
  },
  created() {
    this.getArticleList();
  },
  methods: {
    //重置表单
    ResetForm() {
      this.$refs.queryformRef.resetFields();
      this.getArticleList();
    },
    //获取文章列表
    async getArticleList() {
      const { data } = await list({ page: this.queryInfo.page, pagesize: this.queryInfo.pagesize, keyword: this.queryInfo.keyword, state: this.queryInfo.state });
      this.articlelist = data.items;
      this.queryInfo.page = data.page;
      this.queryInfo.pagesize = data.pagesize;
      this.queryInfo.pages = data.pages;
      this.queryInfo.counts = data.counts;
    },

    // },
    handleSizeChange(newsize) {
      this.queryInfo.pagesize = newsize;
      this.getArticleList();
    },
    handleCurrentChange(newpage) {
      this.queryInfo.page = newpage;
      this.getArticleList();
    },
    //禁用函数
    async exit(userinfo) {
      const res = await changeState(userinfo);
      console.log(res);
      if (res.status !== 200) {
        return this.$message({ message: "操作失败", type: "error" });
      }
      this.$message({
        message: "操作成功",
        type: "success",
      });
      userinfo.state = !userinfo.state;
    },
    //删除功能
    shanchu(userinfo) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          const { data } = await remove(userinfo);
          console.log(data);
          const index = this.articlelist.findIndex((item) => {
            return item.id === userinfo.id;
          });
          this.articlelist.splice(index, 1);

          this.getArticleList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //新增功能
    addFormdialog() {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return;

        const res = await add(this.addForm);

        if (res.status !== 200) {
          return this.$message({ message: "操作失败", type: "error" });
        }
        this.$message({
          message: "操作成功",
          type: "success",
        });
        const obj = {
          articleBody: JSON.parse(res.config.data).articleBody,
          createTime: new Date(),
          creatorID: 2,
          id: res.data.id,
          state: 1,
          title: JSON.parse(res.config.data).title,
          username: "超级管理员",
          videoURL: JSON.parse(res.config.data).videoURL,
          visits: 0,
        };
        this.articlelist.unshift(obj);
      });
      this.dialogVisible = false;
    },
    //关闭新增表单
    addcloseDialog() {
      this.$refs.addFormRef.resetFields();
    },
    //预览功能
    async preview(userinfo) {
      this.previewdialogVisible = true;
      const { data } = await detail(userinfo);

      this.detail = data;
    },
    //点击修改
    async edit(userinfo) {
      this.xiugaiVisible = true;
      const { data } = await detail(userinfo);
      this.detail = data;
    },
    //修改功能
    async xiugaidialog() {
      const res = await update(this.detail);
      if (res.status !== 200) {
        return this.$message({ message: "操作失败", type: "error" });
      }
      this.$message({
        message: "操作成功",
        type: "success",
      });
      this.getArticleList();
      this.xiugaiVisible = false;
    },
    //打开视频
    open(userinfo) {
      this.dialogPlay = true;
      this.videoUrl = userinfo.videoURL;
    },
    close() {
      this.videoUrl = "";
      this.dialogPlay = false;
    },
  },
};
</script>

<style scoped lang="less">
.container {
  .box-card {
    margin: 10px;
  }
  /deep/.el-input__inner {
    height: 32px !important;
  }
  .el-input {
    width: 186px;
  }
  .qingchu {
    margin-left: 20px;
    height: 32px;
  }
  .edit {
    float: right;
  }
  .el-alert {
    margin-bottom: 20px;
  }
  .el-link {
    margin: 0 3px;
  }
  /deep/.ql-container {
    height: 300px;
    overflow: auto;
  }
  /deep/.el-dialog__footer {
    text-align: right;
  }
  /deep/.content {
    padding: 10px;
    margin-top: 10px;
    background-color: #f5f5f5;
    border-top: 1px dashed #ddd;
    img {
      width: 100%;
    }
  }
  /deep/.el-card {
    .fenye {
      margin-top: 20px;
      text-align: right;
    }
  }
  .left10 {
    margin-right: 10px;
  }
  .el-icon-view {
    &::before {
      margin-right: 5px;
    }
  }
  /deep/.video {
    .el-button {
      position: fixed;
      z-index: -9;
      top: 35px;
      left: 50%;
      transform: translate(-50%);
      background-color: #000;
      background-color: rgba(0, 0, 0, 0.5);
      border-color: #000;
      width: 50px;
      height: 50px;
      font-size: 20px;
    }
    .el-dialog__header,
    .el-dialog__body {
      padding: 0;
    }
    .el-dialog__body {
      video {
        vertical-align: middle;
      }
    }
  }
}
</style>
